<template>
  <div class="common-layout">
    <el-container class="layout">
        <el-aside class="aside ">
            <h2>{{ $t('title.name') }}</h2>
            <el-menu
                active-text-color="#ffd04b"
                background-color="#369"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
            >
                <el-menu-item index="1">
                    <el-icon><setting /></el-icon>
                    <span>{{ $t('menu.uploadImg') }}</span>
                </el-menu-item>  
                <el-menu-item index="2">
                    <el-icon><setting /></el-icon>
                    <span>{{ $t('menu.uploadVideo') }}</span>
                </el-menu-item>   
            </el-menu>
        </el-aside>
        <el-container class="right">
            <el-header class="header">
                <div class="menu">
                    <el-menu
                        default-active="1"
                        class="el-menu-demo"
                        mode="horizontal"
                        background-color="#369"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <el-menu-item index="1">{{ $t('menu.home') }}</el-menu-item>
                        <el-menu-item index="2">{{ $t('menu.message') }}</el-menu-item>
                        <el-menu-item index="3">{{ $t('menu.email') }}</el-menu-item>
                        <el-sub-menu index="4">
                            <template #title>{{ $t('menu.admin.name') }}</template>
                            <el-menu-item index="4-1">{{ $t('menu.admin.mine') }}</el-menu-item>
                            <el-menu-item index="4-2">{{ $t('menu.admin.updatePassword') }}</el-menu-item>
                            <el-menu-item index="4-3">{{ $t('menu.admin.exit') }}</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>{{ $t('menu.language.name') }}</template>
                            <el-menu-item index="5-1" @click="changeZH">{{ $t('menu.language.zh') }}</el-menu-item>
                            <el-menu-item index="5-2" @click="changeEN">{{ $t('menu.language.en') }}</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </el-header>
            <el-main class="main">
                Main
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    const activeIndex = ref('1')

    import {getCurrentInstance} from 'vue'
    let $this:any = getCurrentInstance()?.appContext.config.globalProperties
    // 切换中英文
    const changeZH = ()=>{
         $this.$i18n.locale = 'zh'
    }
    const changeEN = ()=>{
        $this.$i18n.locale = 'en'
    }
</script>q

<style lang="less" scoped>
.layout{
    width: 100vw;
    height: 100vh;
    .el-menu{
        border-right: none;
        border-bottom: none;
    }
    .aside{
        width: 200px;
        background: #369;
        h2{
            font-size: 20px;
            color: #fff;
            line-height: 60px;
            text-align: center;
        }
    }
    .right{
        .header{ 
            height: 60px;
            background: #369;
            display: flex;
            justify-content: flex-end;
            .menu{
                width: 620px;
            }
        }
        .main{
            padding: 5px ;
        }  
    }
}

</style>